

const box = document.querySelector('.box')


{//版本一
    
    // box.addEventListener('click',() => {
    //     let def = 0;
    //     const set = setInterval(() => {
    //         def += 5;
    //         box.style.left = def + 'px'
    //         if(def > 300){
    //             clearInterval(set)
    //         }
    //     },16)
    // })

}

{//版本二

    const target = {
        left:300,
        top:{
            target:300,//最大值
            init:100,//初始值
            inites:3,//每次增量
        },
        opacity:{
            target:1,
            init:0,
            inites:0.01,
            tcoy:''
        }
    }

    box.addEventListener('click',() => {
        move(box,target,(dom) => {
            dom.innerText = '结束了';
            alert('结束了')
        })
    })

    function move(box,target,callback){
        const entries = Object.entries(target);//返回值[['left':300]]
        
        let callEnd = 0;

        entries.forEach(item => {

        const type = item[0];
        const obj = item[1];
        const targetDs = obj?.target || obj;

        let def = obj?.init || 0;
        const step = obj?.inites || 5;
        const tcpy = obj?.tcoy ?? 'px';

        const set = setInterval(() => {
            def += step;//5 改为变量
            box.style[type] = def + tcpy//px 改为变量
            if(def > targetDs){//300 改为变量
                callEnd++;
                if(callEnd === entries.length){
                    callback(box)
                }
                clearInterval(set)
            }
        },16)

            })
    }

}